
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title id="divTitle">方剂添加</title>
  <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />

  <style type="text/css">
    *, body {
      margin: 0px;
      font-family: '微软雅黑';
    }
  </style>
  <script th:src="@{/js/jquery-1.10.2.min.js}"></script>
  <script th:src="@{/js/jquery.form.js}"></script>
  <script th:src="@{/js/generic.js}"></script>
</head>

<body>


<table class="maintable">
  <tr>
    <td class="rightmaintd" valign="top">
      <div class="searchdiv">
        <a href="/fjgl">&lt; 返回</a>
        <div class="rightsearchdiv"><!-- name --></div>
      </div>
      <table class="leftrighttable" border="0">
        <tr>
          <td class="lefttdtable"  valign="top" style="width:50%">
            <table cellpadding="6" align="left">
              <tr>
                <td class="tdname">方剂名</td>
                <td><input type="text" id="jingfangming" class="textinput" maxlength="50" style="width:300px"  ></td>
              </tr>
              <tr>
                <td class="tdname">来源</td>
                <td><input type="text" id="laiyuan" class="textinput" maxlength="50" style="width:300px" ></td>
              </tr>
              <tr>
                <td class="tdname">类型</td>
                <td>
                  <select id="leixing" class="textselect" style="width:300px" >
                    <option value="">请选择</option>
                    <option value="经方">经方</option>
                    <option value="时方">时方</option>
                    <option value="验方">验方</option>
                    <option value="自拟方">自拟方</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tdname" valign="top">剂型</td>
                <td>
                  <select id="jixing" class="textselect" style="width:300px" >
                    <option value="">请选择</option>
                    <option value="汤">汤</option>
                    <option value="丸">丸</option>
                    <option value="片">片</option>
                    <option value="散">散</option>
                    <option value="膏">膏</option>
                    <option value="丹">丹</option>
                    <option value="茶">茶</option>
                    <option value="露">露</option>
                    <option value="锭">锭</option>
                    <option value="酒">酒</option>
                    <option value="条">条</option>
                    <option value="线">线</option>
                    <option value="洗">洗</option>
                    <option value="搽">搽</option>
                    <option value="栓">栓</option>
                    <option value="颗粒">颗粒</option>
                    <option value="冲剂">冲剂</option>
                    <option value="胶囊">胶囊</option>
                    <option value="糖浆">糖浆</option>
                    <option value="口服液">口服液</option>
                    <option value="其他">其他</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tdname" valign="top">方论</td>
                <td><textarea id="fanglun" rows="" cols="" class="textareainput" style="width:300px;height:130px" ></textarea></td>
              </tr>
              <tr>
                <td class="tdname" valign="top">用法用量</td>
                <td> <textarea id="yongfayongliang" rows="" cols="" class="textareainput" style="width:300px;height:130px" ></textarea></td>
              </tr>
              <tr>
                <td class="tdname" style="height: 50px;">&nbsp;</td>
                <td>
                  <input type="radio" id="jinzhi" name="peifang3" value="今制" checked="checked">今制  <input type="radio" id="guzhi" name="peifang3" value="古制">古制
                </td>
              </tr>
            </table>
          </td>
          <td class="righttdtable"  valign="top" style="width:50%">
            <table cellpadding="6" align="left" >
              <tr>
                <td class="tdname">方剂名医</td>
                <td><input type="text" id="fangjimingyi" class="textinput" maxlength="50" style="width:300px" ></td>
              </tr>
              <tr>
                <td class="tdname" valign="top">名医朝代</td>
                <td>
                  <select id="chaodai" class="textselect" style="width:300px" >
                    <option value="">请选择</option>
                    <option value="1979年后">1979年后</option>
                    <option value="1949-1979年">1949-1979年</option>
                    <option value="民国">民国</option>
                    <option value="清">清</option>
                    <option value="明">明</option>
                    <option value="元">元</option>
                    <option value="宋">宋</option>
                    <option value="隋唐五代">隋唐五代</option>
                    <option value="魏晋南北朝">魏晋南北朝</option>
                    <option value="汉">汉</option>
                    <option value="先秦">先秦</option>
                    <option value="上古">上古</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tdname" valign="top">名医流派</td>
                <td>
                  <select id="liupai" class="textselect" style="width:300px" >
                    <option value="">请选择</option>
                    <option value="伤寒派">伤寒派</option>
                    <option value="脾胃派">脾胃派</option>
                    <option value="滋阴派">滋阴派</option>
                    <option value="寒凉派">寒凉派</option>
                    <option value="温补派">温补派</option>
                    <option value="温病派">温病派</option>
                    <option value="火神派">火神派</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tdname" valign="top">功能</td>
                <td><textarea id="gongneng" rows="" cols="" class="textareainput" style="width:300px"></textarea></td>
              </tr>
              <tr>
                <td class="tdname" valign="top">主治病证/病机</td>
                <td> <textarea id="zhuzhi" rows="" cols="" class="textareainput" style="width:300px"></textarea></td>
              </tr>
              <tr>
                <td class="tdname" valign="top">主治症状</td>
                <td> <textarea id="zhuzhizhengzhuang" rows="" cols="" class="textareainput" style="width:300px"></textarea></td>
              </tr>
              <tr>
                <td class="tdname">禁忌</td>
                <td><input type="text" id="jinji" class="textinput" maxlength="50" style="width:300px"></td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td  valign="top" style="padding-top:21px">
            <table border="1">
              <tr >


                <td class="tdname" style="height: 50px;width: 80px; ">中药名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td >
                  <input type="text" name="" style="border:1px solid #ccc; width:160px;height:24px;line-height:150%;" id="peifang1" onkeypress="addCheck(event)" oninput="searchData()">
                  <ul id="searchResults"  style="width: 160px; border: 1px solid #ddd; position: relative; left: 0px; top: 0px; z-index: 11; background: #fff;"></ul>
                </td>
              </tr>
              <tr style="height: 30px;">
                <td class="tdname" style="height: 50px; width: 80px;">药量&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td>
                  <input type="text" name="" style="border:1px solid #ccc; width:60px;height:24px;line-height:150%;" id="peifang2">
                  参考量:<input type="text" name="" style="border:1px solid #ccc; width:60px;height:24px;line-height:150%;" id="cankaoyongliang">
                </td>
                <td align="right"style="width:200px">
                  <input type="button" value="添 加=>" class="tianjiabtn" onclick="add();">
                </td>
              </tr>
              <tr>
                <td class="tdname" style="height: 50px;">&nbsp;</td>
                <td>

                </td>
              </tr>
            </table>
          </td>
          <td>
            <div>
              &nbsp; 总药味: <span id="spnumber"></span>
            </div>
            <div class="tianjiafangjidiv" id="divPeifang" style="width: 460px; height: 150px;">

            </div>
          </td>


        </tr>
        <tr>
          <td colspan="2">
            <div class="shenhediv">
              <input type="button" value="保 &nbsp; &nbsp; 存" class="baocunbtn"  id="Sbutton">
              <span id="lrxx"></span>
              <span id="Id" class="shownone">Id</span>
            </div>
          </td>
        </tr>
      </table>

    </td>
  </tr>

</table>
</body>
</html>
<script type="text/javascript">
  var saveButton = document.getElementById('Sbutton');
  var peifang1=document.getElementById('peifang1');
  var jsonData=null;
  var spnumber=document.getElementById('spnumber');
  let  n=0;
  var data1=[];
  saveButton.addEventListener('click', ()=> {

    var jingfangming = document.getElementById('jingfangming').value;
    if(jingfangming==""){
      alert("请输入方剂名");
      return;
    }
    var laiyuan = document.getElementById('laiyuan').value;
    if(laiyuan=="")
      laiyuan=null;
    var leixing = document.getElementById('leixing').value;
    if(leixing=="")
      leixing=null;
    var jixing = document.getElementById('jixing').value;
    if(jixing=="")
      jixing=null;
    var fanglun = document.getElementById('fanglun').value;
    if(fanglun=="")
      fanglun=null;
    var yongfayongliang = document.getElementById('yongfayongliang').value;
    if(yongfayongliang=="")
      yongfayongliang=null;
    var radio = document.getElementsByName('peifang3');
    for (i=0; i<radio.length; i++) {
      if (radio[i].checked) {
        var jinguzhi=radio[i].value
      }
    }
    var fangjimingyi = document.getElementById('fangjimingyi').value;
    if(fangjimingyi=="")
      fangjimingyi=null;
    var chaodai = document.getElementById('chaodai').value;
    if(chaodai=="")
      chaodai=null;
    var liupai = document.getElementById('liupai').value;
    if(liupai=="")
      liupai=null;
    var gongneng = document.getElementById('gongneng').value;
    if(gongneng=="")
      gongneng=null;
    var zhuzhi = document.getElementById('zhuzhi').value;
    if(zhuzhi=="")
      zhuzhi=null;
    var zhuzhizhengzhuang = document.getElementById('zhuzhizhengzhuang').value;
    if(zhuzhizhengzhuang=="")
      zhuzhizhengzhuang=null;
    var jinji = document.getElementById('jinji').value;
    if(jinji=="")
      jinji=null;
    // 创建要发送的数据对象
    var data = {

      jingfangming: jingfangming,
      laiyuan: laiyuan,
      leixing: leixing,
      jixing: jixing,
      fanglun: fanglun,
      yongfayongliang: yongfayongliang,
      jinguzhi: jinguzhi,
      fangjimingyi: fangjimingyi,
      chaodai: chaodai,
      liupai: liupai,
      gongneng: gongneng,
      zhuzhi: zhuzhi,
      zhuzhizhengzhuang: zhuzhizhengzhuang,
      jinji: jinji,
      createuser:"admin"
    };
    console.log(data);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/fjgl/', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify(data));
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        for(var i=0;i<data1.length;i++){
          var xhr2 = new XMLHttpRequest();//发送中药数据
          xhr2.open('POST', '/fjgl/pf1/', true);
          xhr2.setRequestHeader('Content-Type', 'application/json');
          xhr2.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr2.status === 200) {
              // 请求完成并成功处理后的回调函数
              console.log('数据已成功发送至后端');
            }
          };
          xhr2.send(JSON.stringify(data1[i]));
        }
        // 请求完成并成功处理后的回调函数
        console.log('数据已成功发送至后端');
        alert("保存成功！");
        window.location.href="/fjgl";
      }
    };
  });

  getZhongyao();
  function getZhongyao() {
    var container = document.getElementById('divPeifang');
    if (data1.length!=0) {
      console.log("data1:"+data1)
      console.log("length:"+data1.length)
      var html = "";
      for(var j=0;j<data1.length;j++){
        for(var k=0;k+1<data1.length-j;k++){
          if(data1[k].sort>data1[k+1].sort){
            var t=data1[k];
            data1[k]=data1[k+1];
            data1[k+1]=t;}
        }
      }
      // console.log(data1)
      console.log("length:"+data1.length)
      for (var i = 0; i < data1.length; i++) {
        var item = data1[i];
        html += '<span class="fangjispan">' + item.yaowu + ' &nbsp; ' + item.yongliang + ' &nbsp; ' + item.cankaoyongliang + ' &nbsp; ' + ' <img src="/images/quxiao.png" alt="" class="quxiaopic" onclick="del(\'' +i + '\')"> <img src="/images/edit.png" class="quxiaopic" onclick="update(\'' + item.yaowu + '\',\'' + item.yongliang + '\',\'' +item.cankaoyongliang + '\')"></img>';
        if (i != 0) {
          html += '<img src="/images/up.png" class="quxiaopic" onclick="up(\'' + i + '\')"><img>';

        }
        if (i != data1.length-1) {
          html += '<img src="/images/down.png" class="quxiaopic" onclick="down(\'' + i + '\')"><img>';

        }
        html += '</span>';
      }
      spnumber.innerHTML=data1.length;
      container.innerHTML = html;
    }
    else {
      spnumber.innerHTML=0;
      container.innerHTML = "";
    }
  }
  function add() {
    var exist = false;
    var peifang1=document.getElementById('peifang1').value;
    if(peifang1==""){
      alert("请输入药名");
      return;
    }
    var peifang2 = document.getElementById('peifang2').value;
    if (!isNaN(peifang2)) {
      peifang2 = peifang2 + "克";
    }
    var cankaoyongliang = document.getElementById('cankaoyongliang').value;
    if (!isNaN(cankaoyongliang)) {
      cankaoyongliang = cankaoyongliang+"克";
    }
    for (var i = 0; i < data1.length; i++) {
      if (data1[i].yaowu == peifang1) {
        data1[i]={
          yaowu:peifang1,
          yongliang:peifang2,
          cankaoyongliang:cankaoyongliang,
        }
        exist = true;
        break;
      }
    }
    if (!exist) {
      var sort = 0;
      if (data1.length > 0) {
        sort = data1[data1.length - 1].sort+1;
      }
      data1[n]={
        yaowu:peifang1,
        yongliang:peifang2,
        cankaoyongliang:cankaoyongliang,
        sort:sort
      }
    }
    console.log("add sort:"+data1[n].sort)
    n++;
    console.log("add n:"+n)

    console.log(data1)
    getZhongyao();
  }

  function del(p) {
    data1.splice(p,1)
    n--;
    console.log("del n:"+n)
    console.log(data1)
    getZhongyao();
  }
  // 获取中药名
  function getyaoming(){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/fjgl/yaowu', true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        jsonData = JSON.parse(xhr.responseText);
      }
    };
    xhr.send();
  }
  getyaoming();
  // 在获取的中药名中搜索
  function searchData() {
    var keyword = peifang1.value.trim().toUpperCase();
    var results = document.getElementById('searchResults');
    // 清空之前的查询结果
    results.innerHTML = '';
    // 遍历JSON数据，查找匹配的信息
    for (var i = 0; i < jsonData.length; i++) {
      var nameIndex=jsonData[i].yaoming;
      if(nameIndex==null)
        continue;
      var name=nameIndex.toUpperCase();
      if (name.includes(keyword)) {
        // console.log(name);
        // 创建li元素，并将匹配的信息添加到ul标签中
        var li = document.createElement('li');
        li.textContent = nameIndex;
        li.addEventListener('click', function() {
          // 点击查询结果时，将信息装配到input标签中
          peifang1.value = this.textContent;
          results.innerHTML = ''; // 清空查询结果
        });
        results.appendChild(li);
      }
    }
  }
  function addCheck(){
    // 检查按下的按键是否为回车键，回车键的keyCode是13
    if (event.keyCode === 13) {
      add();
    }
  }
  function up(i) {
    console.log("i:"+i)
    var sortp=data1[i].sort
    data1[i].sort=data1[i-1].sort
    data1[i-1].sort=sortp
    console.log("s(i-1)"+data1[i-1].sort)
    console.log("s(i-1)"+data1[i-1].yaowu)
    console.log("si"+data1[i].yaowu)
    console.log("Si"+data1[i].sort)
    getZhongyao();
  }
  function down(i) {
    console.log("i:"+i)
    var sortp=data1[i].sort
    //  var m=i+1;
    // // console.log("Si"+data1[i].sort)
    // console.log("Si+1"+data1[++i].sort)
    data1[i].sort=data1[++i].sort
    data1[i].sort=sortp
    getZhongyao();
  }
</script>